<style>
  input:invalid {
    background-color: #ffdddd;
  }

  form:invalid {
    border: 5px solid #ffdddd;
  }

  input:valid {
    background-color: #ddffdd;
  }

  form:valid {
    border: 5px solid #ddffdd;
  }

  input:required {
    border-color: #800000;
    border-width: 3px;
  }

  input:required:invalid {
    border-color: #C00000;
  }
</style>
<form>
  <label for="url_input">Enter a URL:</label>
  <input type="url" id="url_input" />
  <br />
  <br />
  <label for="email_input">Enter an email address:</label>
  <input type="email" id="email_input" required />
</form>